<template>
  <div class="multiple-bar-chart-container">
    <div class="chart-header">
      <h3 class="chart-title">{{ title }}</h3>
      <p class="chart-subtitle">{{ subtitle }}</p>
    </div>
    <div ref="chart" class="chart-wrapper"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import {debounce} from 'lodash'

export default {
  name: 'MultipleBarChart',
  props: {
    title: {
      type: String,
      default: '产品季度销量对比'
    },
    subtitle: {
      type: String,
      default: '2023年各产品线季度销售数据统计'
    }
  },
  data() {
    return {
      chartInstance: null,
      // 示例数据 - 小清新风格配色
      chartData: {
        categories: ['一季度', '二季度', '三季度'],
        series: [
          {
            name: '产品A',
            data: [120, 150, 130, 170],
            itemStyle: {
              color: '#a8d8ea' // 淡蓝色
            }
          },
          {
            name: '产品B',
            data: [90, 110, 140, 120],
            itemStyle: {
              color: '#aa96da' // 淡紫色
            }
          },
          {
            name: '产品C',
            data: [80, 100, 90, 110],
            itemStyle: {
              color: '#fcbad3' // 淡粉色
            }
          },
        ]
      }
    }
  },
  mounted() {
    // 初始化图表
    this.initChart()
    // 监听窗口大小变化，自适应图表
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 销毁图表实例，释放资源
    if (this.chartInstance) {
      this.chartInstance.dispose()
    }
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    initChart() {
      // 创建图表实例
      this.chartInstance = echarts.init(this.$refs.chart)

      // 设置图表配置
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(0, 0, 0, 0.05)'
            }
          },
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#eee',
          borderWidth: 1,
          textStyle: {
            color: '#666'
          },
          padding: 10
        },
        legend: {
          data: this.chartData.series.map(item => item.name),
          top: 0,
          textStyle: {
            color: '#666'
          },
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.chartData.categories,
          axisLine: {
            lineStyle: {
              color: '#eee'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#f5f5f5'
            }
          },
          axisLabel: {
            color: '#666',
            formatter: '{value}'
          }
        },
        series: this.chartData.series.map(series => ({
          ...series,
          type: 'bar',
          barWidth: '25%',
          emphasis: {
            itemStyle: {
              color: series.itemStyle.color.replace(')', ', 0.8)').replace('rgb', 'rgba')
            }
          }
        }))
      }

      // 设置配置项
      this.chartInstance.setOption(option)
    },

    // 防抖处理窗口 resize
    handleResize: debounce(function () {
      if (this.chartInstance) {
        this.chartInstance.resize()
      }
    }, 100)
  }
}
</script>

<style scoped>
.multiple-bar-chart-container {
  width: 100%;
  min-width: 300px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  box-sizing: border-box;
}

.chart-header {
  margin-bottom: 15px;
  text-align: center;
}

.chart-title {
  margin: 0 0 5px 0;
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.chart-subtitle {
  margin: 0;
  color: #999;
  font-size: 14px;
}

.chart-wrapper {
  width: 100%;
  height: 400px;
}
</style>
